インタラクションモード

ホバーまたはツールチップを介してグラフとの対話を構成する場合、さまざまなモードを使用できます。

モードとそれらがどのように動作するかについては、以下で詳しく説明します。intersect設定。

点

ポイントと交差するすべてのアイテムを検索します。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'point'
        }
    }
});

最寄りの

ポイントに最も近い距離にあるアイテムを取得します。最も近い項目は、グラフ項目 (点、棒) の中心までの距離に基づいて決定されます。使用できますaxis距離の計算に使用される方向を定義する設定。もしもintersecttrue の場合、これはマウスの位置がグラフ内の項目と交差する場合にのみトリガーされます。これは、ポイントがバーの後ろに隠れているコンボチャートに非常に便利です。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'nearest'
        }
    }
});

シングル (非推奨)

ポイントと交差する最初のアイテムを検索し、それを返します。次のように動作します'nearest'モード付きintersect = true。

ラベル (非推奨)

見る'index'モード。

索引

同じインデックスで項目を検索します。もしintersect設定が true の場合、最初に交差する項目がデータ内のインデックスを決定するために使用されます。もしもintersectfalse の場合、x 方向で最も近い項目がインデックスの決定に使用されます。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'index'
        }
    }
});

横棒グラフのようなグラフでインデックスモードを使用し、y 方向に沿って検索するには、axisv2.7.0 で導入された設定。この値を次のように設定すると、'y'y 方向のが使用されます。

var chart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: {
        tooltips: {
            mode: 'index',
            axis: 'y'
        }
    }
});

x 軸 (非推奨)

次のように動作します'index'モード付きintersect = false。

データセット

同じデータセット内のアイテムを検索します。もしintersect設定が true の場合、最初に交差する項目がデータ内のインデックスを決定するために使用されます。もしもintersectfalse は、最も近い項目を使用してインデックスを決定します。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'dataset'
        }
    }
});

バツ

に基づいて交差するすべてのアイテムを返します。X位置の座標のみ。垂直カーソルの実装に役立ちます。これはデカルトチャートにのみ適用されることに注意してください。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'x'
        }
    }
});

y

に基づいて交差するすべてのアイテムを返します。Y位置の座標。これは水平カーソルの実装に役立ちます。これはデカルトチャートにのみ適用されることに注意してください。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'y'
        }
    }
});

モード